import React, { useEffect } from 'react'
import { Button, Modal, Form, Input } from 'antd';

const DetailCategories = (props) => {
    const [form] = Form.useForm();
    const closeModel = () => {
        props.setDetailOpen(false);
    };
    console.log(props);
    useEffect(() => {
        form.setFieldsValue({
            "title": props.currentData.title, 
            "value": props.currentData.value,
        });
    }, []);
    return (
        <Modal
            open={props.detailOpen}
            title={<p>分类详情</p>}
            onCancel={() => props.setDetailOpen(false)}
            footer={
                <Button type="primary" onClick={closeModel}>
                    关闭
                </Button>
            }
        >
            <Form form={form}
                name="validateOnly"
                layout="vertical"
                autoComplete="off"
            >
                <Form.Item
                    name="title"
                    label="分类标题"
                >
                    <Input disabled = {true}/>
                </Form.Item>
                <Form.Item
                    name="value"
                    label="分类内容"
                >
                    <Input disabled = {true} />
                </Form.Item>
            </Form>
        </Modal>
    );
};
export default DetailCategories;
